import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class WrapDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => DrapState();
}

class DrapState extends State<WrapDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('流式布局wrap'),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.only(left: 8, right: 8),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Wrap(
              //主轴（水平）方向间距
              spacing: 8,
              //纵轴（垂直）方向间距
              runSpacing: 0,
              //主轴方向的对齐方式
              alignment: WrapAlignment.start,
              //纵轴方向的对齐方式
              runAlignment: WrapAlignment.start,
              children: <Widget>[
                Chip(
                  avatar: CircleAvatar(
                    backgroundColor: Colors.blue,
                    child: Text('1'),
                  ),
                  label: Text('第一个'),
                ),
                Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text('2'),
                    ),
                    label: Text('第二个')),
                Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text('3'),
                    ),
                    label: Text('第三个')),
                Chip(
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text('4'),
                    ),
                    label: Text('第四个')),
              ],
            ),
            Wrap(
                //主轴（水平）方向间距
                spacing: 8,
                //纵轴（垂直）方向间距
                runSpacing: 5,
                children: List.generate(
                    12,
                    (index) => Container(
                          width: 100,
                          height: 100,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              gradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                Colors.orangeAccent,
                                Colors.orange,
                                Colors.deepOrange
                              ])),
                          child: Text('$index',
                          style: TextStyle(
                            color:Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.bold
                          ),),
                        ))),
          ],
        ),
      ),
    );
  }
}
